<script setup lang="jsx">
import CommonList from "@/components/CommonList.vue";
import CommonDialog from "@/components/CommonDialog.vue";
import { useCommonQuery } from "@/composables/useCommonQuery.js";
import {
  getCompanyRobotList,
  bindRobot,
  unbindRobot,
} from "@/api/disinfect/robot-manage";
import { itlcloudApi, itlcloudRobot } from "@/api/disinfect/map-manage";
import { reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { defaultRules as rules } from "@/utils/defind.js";

const bindRobotFormData = ref({});

const bindRobotFormItem = ref([
  { prop: "name", label: "名称", rules },
  { prop: "code", label: "ID", rules },
  { prop: "password", label: "密码", rules },
]);

const bindRobotOptions = reactive({
  labelWidth: 120,
  dialogWidth: 600,
});

async function bindRobotDialogConfirm() {
  await ElMessageBox.confirm("确认继续操作吗", "警告");
  handleConfirm(bindRobotFormData.value);
}
function bindRobotDialogClose() {
  dialogParams.visible = false;
}

function openDialog() {
  dialogParams.visible = true;
}

const queryItem = ref([
  { prop: "rid", placeholder: "编号" },
  { prop: "name", placeholder: "机器人名称" },
]);

const columns = [
  { prop: "id", label: "编号" },
  { prop: "name", label: "机器人名称" },
  { prop: "type", label: "类型" },
  {
    prop: "status",
    label: "状态",
    customRender(row) {
      if (row.status === "0") return "离线";
      if (row.status === "1") return "在线";
    },
  },
  {
    label: "操作",
    prop: "action",
    customRender(row) {
      return (
        <div>
          <el-button
            data-test="itlcloud-binding"
            type="primary"
            text
            bg
            onClick={() => {
              itlcloud.visible = true;
              itlcloud.formData.code = row.code;
            }}
          >
            电梯绑定
          </el-button>
          <el-button
            data-test="robot-delete"
            type="danger"
            text
            bg
            onClick={() => handleDelete(row.id)}
          >
            解绑
          </el-button>
        </div>
      );
    },
  },
];

const queryOptions = {
  queryApi: getCompanyRobotList,
  createApi: bindRobot,
  deleteApi: unbindRobot,
};
const {
  tableData,
  loading,
  dialogParams,
  queryParams,
  pagingParams,
  handleQuery,
  handleConfirm,
  handleDelete,
  handleReset,
} = useCommonQuery(queryOptions);

handleQuery();

const itlcloud = reactive({
  visible: false,
  formData: {
    code: null,
    itlId: null,
    robotId: null,
  },
  list: [],
  robotList: [],
});
async function getItlcloud() {
  const {
    data: { list = [] },
  } = await itlcloudApi.queryAll();
  itlcloud.list = list;
}
getItlcloud();
async function changeItlcloud(id) {
  const {
    data: { list = [] },
  } = await itlcloudRobot.queryAll({ itlId: id });
  itlcloud.robotList = list;
}
async function onSubmit() {
  itlcloud.formData.itlId = String(itlcloud.formData.itlId);
  itlcloud.formData.robotId = String(itlcloud.formData.robotId);
  const { message } = await itlcloudRobot.create(itlcloud.formData);
  ElMessage({ message });
  itlcloud.visible = false;
  itlcloud.formData.itlId = null;
  itlcloud.formData.robotId = null;
}

async function onClose() {
  itlcloud.visible = false;
  itlcloud.formData.itlId = null;
  itlcloud.formData.robotId = null;
}
</script>
<template>
  <div class="h-main p-4 flex flex-col gap-4">
    <div class="flex">
      <el-button type="primary" @click="openDialog()">
        <el-icon><Plus /></el-icon> 绑定机器人
      </el-button>
    </div>
    <CommonList
      data-test="common-list"
      :table-data="tableData"
      :loading="loading"
      :table-columns="columns"
      :query-params="queryParams"
      :query-item="queryItem"
      :paging-params="pagingParams"
      @handle-query="handleQuery"
      @handle-reset="handleReset"
    ></CommonList>
    <CommonDialog
      :dialog-params="dialogParams"
      :form-data="bindRobotFormData"
      :options="bindRobotOptions"
      :form-item="bindRobotFormItem"
      @close="bindRobotDialogClose"
      @confirm="bindRobotDialogConfirm"
    ></CommonDialog>
    <el-dialog
      :model-value="itlcloud.visible"
      title="绑定电梯机器人"
      width="640px"
      @close="onClose()"
    >
      <el-form :model="itlcloud.formData" label-width="100px" label-suffix="：">
        <el-form-item label="Code" prop="code">
          <el-input v-model="itlcloud.formData.code"></el-input>
        </el-form-item>
        <el-form-item label="电梯配置" prop="itlId">
          <el-select v-model="itlcloud.formData.itlId" @change="changeItlcloud">
            <el-option
              v-for="item in itlcloud.list"
              :key="item.id"
              data-test="itlcloud-name"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="电梯机器人" prop="robotId">
          <el-select v-model="itlcloud.formData.robotId">
            <el-option
              v-for="item in itlcloud.robotList"
              :key="item.id"
              data-test="itlcloud-robot-name"
              :label="item.robotId"
              :value="item.robotId"
            />
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>
